<template>
  <div v-if="data" class="ren">
    <div class="common" v-if="data.type==1">
      <div class="navTop">
        <div class="icons">
          <span
            class="iconfont iconjiantou"
            @click="search?$router.back():$router.push({name:'Home'})"
          ></span>
        </div>
        <div class="icon">
          <span class="iconfont iconnew"></span>
        </div>
        <div class="keep" v-if="data.has_follow" @click="unfollow">已关注</div>
        <div class="keeps" v-else @click="follow">关注</div>
      </div>
      <div class="comment">
        <div class="title" v-html="data.title"></div>
        <div class="time">
          <span>{{data.user.username}}</span>
          <span v-if="data.user.create_date">{{data.user.create_date.split('T')[0]}}</span>
        </div>
        <div class="Img2" v-for="item in data.cover" :key="item.id">
          <img :src="item.url|filtersUrl" />
        </div>
        <div class="content" v-html="data.content"></div>
      </div>
      <!-- <div class="footer">
        <div class="dianzan">
          <div v-if="data.has_like">
            <span class="iconfont icondianzan dian" @click="unlike"></span>
            {{data.like_length || 0}}
          </div>
          <div v-else>
            <span class="iconfont icondianzan" @click="like"></span>
            {{data.like_length || 0}}
          </div>
        </div>
        <div class="weixin">
          <span class="iconfont iconweixin"></span>微信
        </div>
      </div>-->
    </div>
    <div class="special" v-if="data.type==2">
      <div class="navTop2">
        <div class="icons2">
          <span
            class="iconfont iconjiantou"
            @click="search?$router.back():$router.push({name:'Home'})"
          ></span>
        </div>
        <div class="icon2">
          <span class="iconfont iconnew"></span>
        </div>
      </div>
      <div class="Video">
        <video :src="data.content" :poster="data.cover[0].url |filtersUrl" controls muted></video>
      </div>

      <div class="nav2">
        <div class="Img">
          <img :src="data.user.head_img|filtersUrl" />
        </div>
        <div class="p">{{data.user.username}}</div>
        <div class="keep2" v-if="data.has_follow" @click="unfollow">已关注</div>
        <div class="keep2s" v-else @click="follow">关注</div>
      </div>
      <div class="title2" v-html="data.title"></div>
      <!-- <div class="footer2">
        <div class="dianzan2">
          <div v-if="data.has_like">
            <span class="iconfont icondianzan dian" @click="unlike"></span>
            {{data.like_length || 0}}
          </div>
          <div v-else>
            <span class="iconfont icondianzan" @click="like"></span>
            {{data.like_length || 0}}
          </div>
        </div>
        <div class="weixin2">
          <span class="iconfont iconweixin"></span>微信
        </div>
      </div>-->
    </div>
    <discuss :data="datas" text="精彩跟帖" @reply="reply" @replys="replys" />
    <van-popup v-model="show" position="bottom" :style="{ height: '70%'}">
      <van-list
        v-model="data.loading"
        :finished="data.finished"
        finished-text="没有更多评论"
        :immediate-check="false"
        @load="onLoad"
      >
        <discuss
          :data="dataS"
          text="更多跟帖"
          @reply="reply"
          @replys="replys"
          :comment_length="comment_length"
          @shut="shut"
        />
      </van-list>
      <unfooter
        ref="unfooter"
        :dataId="dataId"
        @morecomment="morecomment1"
        :has="data.has_star"
        :likes="data.has_like"
        @shoucang="shoucang"
        @unshoucang="unshoucang"
        @like="like"
        @unlike="unlike"
        @pinglun="pinglun"
        :comment_length="comment_length"
        :like_length="data.like_length"
      />
    </van-popup>
    <div class="easier" @click="easier" v-if="comment_length>3">更多跟帖>></div>
    <unfooter
      @Btn="BtnFooter"
      ref="unfooter"
      :dataId="dataId"
      :has="data.has_star"
      :likes="data.has_like"
      @shoucang="shoucang"
      @unshoucang="unshoucang"
      @like="like"
      @unlike="unlike"
      @pinglun="pinglun"
      :comment_length="comment_length"
      :like_length="data.like_length"
    />
  </div>
</template>

<script>
// import discuss from "../components/discuss";
// import unfooter from "../components/unfooter";
export default {
  components: {
    discuss: () => import("../components/discuss"),
    unfooter: () => import("../components/unfooter")
  },
  data() {
    return {
      search: localStorage.getItem("search"),
      data: [],
      datas: [],
      dataS: [],
      show: false,
      dataId: "",
      comment_length: "",

    };
  },
  methods: {
    onLoad() {
      this.data.pageIndex += 1;
      this.morecomments();
      // console.log(this.data.pageIndex);
    },
    details() {
      this.$axios({
        url: "/post/" + this.$route.params.id
      }).then(res => {
        res.data.data.pageIndex = 1;
        res.data.data.pageSize = 10;
        res.data.data.loading = false;
        res.data.data.finished = false;
        this.data = res.data.data;
        // console.log(this.data);
        this.comment_length = this.data.comment_length;
      });
    },
    morecomments() {
      this.$axios({
        url: "/post_comment/" + this.$route.params.id,
        params: {
          pageSize: this.data.pageSize,
          pageIndex: this.data.pageIndex
        }
      }).then(res => {
        // this.dataS = Array.from(new Set([...this.dataS, ...res.data.data]));
        this.dataS = [...this.dataS, ...res.data.data];
        // this.comment_length = this.dataS.comment_length;
        // console.log(this.data.pageIndex);
        this.data.loading = false;
        if (res.data.data.length < this.data.pageSize) {
          this.data.finished = true;
          // console.log(11111111111);
        }
        // console.log(this.dataS);
      });
    },
    reply(dataId) {
      this.dataId = dataId;
      // console.log(this.dataId);
      this.$refs.unfooter.blur();
    },
    replys(dataId) {
      this.dataId = dataId;
      // console.log(444444444);
      this.$refs.unfooter.blur();
    },
    unfollow() {
      this.$axios({
        url: "/user_unfollow/" + this.data.id,
        method: "get"
      }).then(res => {
        // this.$toast.success('取关成功');
        this.$toast({
          message: '取关成功',
          icon: 'cross',

        });
        this.data.has_follow = false;
      });
    },
    follow() {
      if (!localStorage.getItem('token')) {
        this.$dialog.confirm({
          title: '需要登录才能进行关注',
          message: '是否前往登录',
        })
          .then(() => {
            localStorage.setItem('back', this.$route.path)
            this.$router.push({ name: 'login' })
          })
        return
      }
      this.$axios({
        url: "/user_follows/" + this.data.id,
        method: "get"
      }).then(res => {
        this.$toast.success('关注成功');
        this.data.has_follow = true;
      });
    },
    unlike() {
      console.log(6666);
      this.$axios({
        url: "/post_like/" + this.data.id,
        method: "get"
      }).then(res => {
        this.data.like_length -= 1;
        this.data.has_like = false;
      });
    },
    like() {
      console.log(6666);
      this.$axios({
        url: "/post_like/" + this.data.id,
        method: "get"
      }).then(res => {
        this.data.like_length += 1;
        this.data.has_like = true;
      });
    },
    pinglun() {
      this.easier()
    },
    easier() {
      this.show = true;
      this.details();
      this.morecomments();
    },
    BtnFooter() {
      // console.log(123777);

      this.$axios({
        url: "/post_comment/" + this.$route.params.id,
        params: {
          pageSize: this.data.pageSize,
          pageIndex: this.data.pageIndex
        }
      }).then(res => {
        const date = res.data.data;
        if (date.length > 3) {
          date.length = 3;
        }
        this.datas = date;
        this.details();
      });
    },
    shut() {
      this.show = false;
    },
    morecomment1() {

      // this.easier();
      this.$axios({
        url: "/post_comment/" + this.$route.params.id
        // params: {
        //   pageSize: 8,
        //   pageIndex: 1
        // }
      }).then(res => {
        this.dataS = [...res.data.data];
        // this.comment_length = this.dataS.comment_length;
        // console.log(this.data.pageIndex);
        // this.data.loading = false;
        // if (res.data.data.length < this.data.pageSize) {
        //   this.data.finished = true;
        //   console.log(11111111111);
        // }
        // console.log(this.dataS);
      });
      this.details();
    },
    shoucang() {
      this.$axios.get("/post_star/" + this.data.id).then(res => {
        // console.log(res);
        this.data.has_star = true;
        this.$toast.success('收藏成功');
      });
    },
    unshoucang() {
      this.$axios.get("/post_star/" + this.data.id).then(res => {
        // console.log(res);
        this.data.has_star = false;
        this.$toast({
          message: '取消收藏',
          icon: 'cross',

        });
      });
    }
  },

  created() {
    this.details();
    this.$axios({
      url: "/post_comment/" + this.$route.params.id,
      params: {
        pageSize: this.data.pageSize,
        pageIndex: this.data.pageIndex
      }
    }).then(res => {
      const date = res.data.data;
      if (date.length > 3) {
        date.length = 3;
      }
      this.datas = date;
      // console.log(this.datas);
      //   console.log( res.data.data);
    });
  }
};
</script>

<style lang="less" scoped>
// .contentt {
//   padding: 4.444vw 4.444vw 44.444vw;
// }

/deep/.van-popup--bottom {
  margin-top: 27.778vw;
  // margin-bottom: 16.667vw;
  padding-bottom: 19.444vw;
}
/deep/.van-popup--bottom .comment .title {
  width: 100%;
  position: fixed;
  // text-align: center;
  height: 11.111vw;
  line-height: 15.278vw;
  margin: -14vw 0 auto;
  // padding: 2.778vw 0 0 0;
  z-index: 2010;
  background-color: #fff;
  font-style: 3.889vw;
  text-align: center;
  border-bottom: 1px solid #888;
  border-radius: 2.778vw 2.778vw 0 0;
}
/deep/.iconicon-test:before {
  content: "\e612";
  position: absolute;
  left: 5.556vw;
}

.ren {
  // width: 100%;
  // height: 100%;
  margin-bottom: 27.778vw;
}
.common {
  border-bottom: 1.111vw solid #ccc;
  padding-bottom: 20px;

  .navTop {
    display: flex;
    .icon {
      margin: 0 0 3.056vw 0vw;
      flex: 1;
      .iconnew {
        font-size: 13.889vw;
      }
    }
    .icons {
      margin: 5.556vw 1.389vw 0 4.167vw;
      .iconjiantou {
        font-size: 4.444vw;
      }
    }
    .keep,
    .keeps {
      margin: 6.944vw 6.944vw;
      font-size: 3.333vw;
      text-align: center;
      width: 16.667vw;
      height: 6.944vw;
      line-height: 6.944vw;
      // border: 0.278vw solid #eee;
      outline: none;
      border-radius: 6.944vw;
      background: #eee;
    }
    .keeps {
      background: red;
      color: #fff;
    }
  }
  .title {
    padding: 0vw 2.778vw 1.389vw 2.778vw;
    font-size: 4.444vw;
    font-weight: 700;
  }
  .time {
    color: #ccc;
    font-size: 3.333vw;
    span {
      padding: 0vw 2.778vw;
    }
  }
  .Img2 {
    // height: 55.556vw;
    // width: 83.333vw;
    padding: 2.778vw;
    // margin-left: 4.167vw;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .content {
    padding: 4.167vw 2.778vw;
    font-size: 3.333vw;
    line-height: 6.944vw;
    /deep/ img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .footer {
    margin: 5.556vw 0;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 3.333vw;
    .dianzan {
      margin-right: 11.111vw;
    }
    .weixin {
      margin-left: 11.111vw;
      .iconweixin {
        color: lime;
      }
    }
    .dianzan,
    .weixin {
      border-radius: 5.556vw;
      width: 22.222vw;
      height: 8.333vw;
      line-height: 8.333vw;

      border: solid 0.278vw #ccc;
      .icondianzan,
      .iconweixin {
        font-size: 3.889vw;
        padding-right: 2.222vw;
      }
      .dian {
        color: red;
      }
    }
  }
}
.special {
  border-bottom: 1.111vw solid #ccc;
  padding-bottom: 20px;

  .navTop2 {
    display: flex;
    .icon2 {
      margin: 0vw 0vw 3.056vw 0;
      flex: 1;
      .iconnew {
        font-size: 13.889vw;
      }
    }
    .icons2 {
      margin: 5.556vw 1.389vw 0 4.167vw;
      .iconjiantou {
        font-size: 4.444vw;
      }
    }
  }
  .Video {
    video {
      width: 100%;
      height: 100%;
    }
  }
  .nav2 {
    display: flex;

    margin: 5.556vw 5.556vw 2.778vw 5.556vw;
    .Img {
      width: 8.333vw;
      height: 8.333vw;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
      }
    }
    .p {
      flex: 1;
      font-size: 3.333vw;
      padding: 2.222vw;
      color: #ccc;
    }
    .keep2,
    .keep2s {
      //   margin: 6.944vw 5.556vw;
      font-size: 3.333vw;
      text-align: center;
      width: 16.667vw;
      height: 6.944vw;
      line-height: 6.944vw;
      border: 0.278vw solid #eee;
      border-radius: 6.944vw;
      background: #eee;
    }
    .keep2s {
      background-color: red;
      color: #fff;
    }
  }

  .title2 {
    font-size: 4.444vw;
    font-weight: 700;
    padding: 0 2.778vw 2.778vw 2.778vw;
  }
  .footer2 {
    margin: 5.556vw 0;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 3.333vw;
    .dianzan2 {
      margin-right: 11.111vw;
    }
    .weixin2 {
      margin-left: 11.111vw;
      .iconweixin {
        color: lime;
      }
    }
    .dianzan2,
    .weixin2 {
      border-radius: 5.556vw;
      width: 22.222vw;
      height: 8.333vw;
      line-height: 8.333vw;

      border: solid 0.278vw #ccc;
      .icondianzan,
      .iconweixin {
        font-size: 3.889vw;
        padding-right: 2.222vw;
      }
      .dian {
        color: red;
      }
    }
  }
}

.easier {
  text-align: center;
  margin: 20px auto;
  font-size: 12px;
  color: #ccc;
  border: 1px solid #888;
  border-radius: 10px;
  height: 28px;
  line-height: 28px;
  width: 90px;
  outline: none;
  padding: 0 7px;
}
</style>
